<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home/class"></ion-back-button>
    </ion-buttons>
    <ion-title>{{classInfo.name}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngIf="isTeacher" class="card" lines="none" detail [disabled]="!classInfo.enabled" (click)="doChange()">
      <ion-thumbnail slot="start">
        <ion-img src="/assets/img/course_photo.jpg"></ion-img>
      </ion-thumbnail>
      <ion-label>
        <h2>{{classInfo.className}}</h2>
        <h2>{{classInfo.courseName}}</h2>
        <p>{{classInfo.semester}}</p>
      </ion-label>
    </ion-item>
    <ion-item *ngIf="!isTeacher" class="card" lines="none">
      <ion-thumbnail slot="start">
        <ion-img src="/assets/img/course_photo.jpg"></ion-img>
      </ion-thumbnail>
      <ion-label>
        <h2>{{classInfo.className}}</h2>
        <h2>{{classInfo.courseName}}</h2>
        <h3>{{classInfo.teacherName}}</h3>
        <p>{{classInfo.semester}}</p>
      </ion-label>
    </ion-item>
    <ion-item *ngIf="isTeacher" class="info" lines="none">
      <ion-label>允许加入</ion-label>
      <ion-checkbox (ionChange)="checkboxChange()" [disabled]="!classInfo.enabled" [(ngModel)]="classInfo.joinPermission"></ion-checkbox>
    </ion-item>
    <ion-item *ngIf="isTeacher" class="info" lines="none" [disabled]="!classInfo.enabled">
      <ion-label>班课号</ion-label>
      <ion-text>{{classInfo.courseCode}}</ion-text>
    </ion-item>
  </ion-list>
  <div [hidden]="!isTeacher" class="qrdiv">
    <canvas #qr id="qr"></canvas>
  </div>
 
  <ion-button *ngIf="isTeacher" expand="block" color="danger" class="info" fill="outline" [disabled]="!classInfo.enabled" (click)="closeClass()">结束班课</ion-button>
  <br />
  <!-- <ion-button *ngIf="isTeacher" expand="block" color="danger" class="info" fill="outline" [disabled]="classInfo.enabled || classInfo.isDeleted" (click)="deleteClass()">删除班课</ion-button>
  <ion-text *ngIf="isTeacher" style="padding-left: 10%;font-size: smaller;">只有已结束的班课可以被删除</ion-text> -->
  <ion-button *ngIf="!isTeacher" expand="block" color="danger" class="info" fill="outline" (click)="exitClass()">退出班课</ion-button>
</ion-content>
